<template>
  <Transition name="list">
    <div class="mask" v-if="DialogShow"></div>
  </Transition>

  <el-dialog v-model="DialogShow" :title="prop.title" center custom-class="custom_class " :width="prop.width">
    <div class="main">
      <!-- 插槽 -->
      <slot></slot>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="submitForm(onCancel)"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { inject, onMounted, defineProps } from "vue";
import { ElMessage } from "element-plus";
const prop = defineProps({
  title: String,
  width: {
    type: String,
    default: "40%",
  },
});
const DialogShow = inject("SHOW");
const submitForm = inject("SUBMITFORM", () => {
  ElMessage.error("请注入提交函数！");
});
const onCancel = inject("ONCANCEL", () => {
  DialogShow.value = false;
});

onMounted(() => {
  console.log("弹窗的prop");
});
</script>
<style lang="scss">
.mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 99;
  filter: blur(5px) !important;
  backdrop-filter: blur(5px);
}

.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
}

.list-enter-from,
.list-leave-to {
  transform: scale(0);
}

// 修改弹窗的样式
.custom_class {
  border-radius: 10px;
}
</style>
